<template>
  <el-scrollbar class="playlist-detail scroll-page">
      <div v-for="(item, i) in lyricsObjArr"
           :key="item.uid"
           :data-index='i'
           ref="lyric"
           class="item"
      >{{item.lyric}}</div>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      lyricsObjArr: []
    }
  },
  mounted () {
    this.getData()
  },
  computed: {
    lyric () {
      return this.$store.state.player.lyric
    }
  },
  watch: {
    lyric (val) {
      console.log(val, '歌词')
      this.getData(val)
    }
  },
  methods: {
    getData (val) {
      this.lyricsObjArr = []
      const lyric = this.lyric || val || ''
      const regNewLine = /\n/
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/
      const lineArr = lyric.split(regNewLine) // 每行歌词的数组
      lineArr.forEach(item => {
        if (item === '') return
        const obj = {}
        const time = item.match(regTime)
        obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim()
        obj.time = time ? this.formatLyricTime(time[0].slice(1, time[0].length - 1)) : 0
        obj.uid = Math.random().toString().slice(-6)
        if (obj.lyric === '') {
          console.log('这一行没有歌词')
        } else {
          this.lyricsObjArr.push(obj)
        }
      })
    },
    formatLyricTime (time) { // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/
      const regSec = /:.*\./
      const regMs = /\./

      const min = parseInt(time.match(regMin)[0].slice(0, 2))
      let sec = parseInt(time.match(regSec)[0].slice(1, 3))
      const ms = time.slice(time.match(regMs).index + 1, time.match(regMs).index + 3)
      if (min !== 0) {
        sec += min * 60
      }
      return Number(sec + '.' + ms)
    }
  }
}
</script>

<style scoped lang="scss">
.playlist-detail{
  background: #f0f0f0;
  flex: 1;
  color: #606266;
  font-size: 14px;
  line-height: 28px;
  .item{
    text-align: center;
  }
}

</style>